import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Flex ,Toast} from "antd-mobile";
import s from "./index.scss";
import AxFooter from 'components/Footer'
import AxHeader from 'components/AxHeader'
import {callApi} from 'app/utils'
 
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      username:'',
      idCard:'',
    };
    this.submit = this.submit.bind(this)
    this.handleUser = this.handleUser.bind(this)
    this.handleIdCard = this.handleIdCard.bind(this)
    
  }


  componentDidMount() {

  }

  voledate(){
    if(this.state.username==''){
      Toast.info('真实姓名不能为空', 1);
      return false
    }
    if(!(/^([\u4E00-\u9FA5]){2,8}$/.test(this.state.username))){
      Toast.info('请输入真实姓名(中文2-8位)', 1);
      return false
    }
    if(this.state.idCard==''){
      Toast.info('身份证号码不能为空', 1);
      return false
    }
    if(!(/^(\d{18}|\d{17}[X])$/.test(this.state.idCard))){
      Toast.info('身份证号码格式不正确', 1);
      return false
    }
    return true
  }
  handleUser(e){
    this.setState({
      username: e.target.value
    })
   
  }
  handleIdCard(e){
    this.setState({
      idCard: e.target.value
    })
  }
  submit(){
    if(this.voledate()==true){
      if(localStorage.getItem('userData')!=undefined&&localStorage.getItem('userData')!=null){
        var userBindCadSubmitData = {
          token: JSON.parse(localStorage.getItem('userData')).token,
          realName: this.state.username,
          idcard: this.state.idCard
        };
        callApi('/account/realName/auth',userBindCadSubmitData,'POST').then((data)=>{
          if(data.success==true){
            window.location.href = data.data.ret_url;
          }
        })
      }else{
        Toast.info('用户未登录', 1);
      }

    }
  }

  render() {
    return (
      <div className={`${s.bindBankCardBox}`}>
        <div>
          <AxHeader />
          <Flex className={`${s.oneBox}`} direction="column">
            <Flex.Item className={`${s.tip}`}>
              <span>1</span>请填写您的真实个人身份信息
            </Flex.Item>
            <Flex.Item className={`${s.iptItem}`}>
              <Flex.Item className={`${s.left} flex2`}>姓名:</Flex.Item>
              <Flex.Item className={`${s.right} flex8`}><input type="text" placeholder="请输入姓名，与银行卡保持一致" onChange={this.handleUser}  /></Flex.Item>
            </Flex.Item>
            <Flex.Item className={`${s.iptItem}`}>
              <Flex.Item className={`${s.left} flex2`}>身份证:</Flex.Item>
              <Flex.Item className={`${s.right} flex8`}><input type="text" placeholder="请输入您的身份证号（仅支持二代身份证" onChange={this.handleIdCard} /></Flex.Item>
            </Flex.Item>
            <Flex.Item className={`${s.tip2}`}>
                我已阅读并同意<a>《银行存管第三方协议》</a>与<a>《用户授权协议》</a>
            </Flex.Item>
          </Flex>
        </div>


        <Flex className={`${s.botBox}`} direction="column">
            <Flex.Item className={`${s.tip}`}>
              账户资金由江西银行存管
          </Flex.Item>
            <Flex.Item className={`${s.btn}`} onClick={this.submit}>
              确认
            </Flex.Item>
        </Flex>
      </div>
    );
  }
}
